<template>
	<view>
		<u-popup class="school-popup" v-model="showPop" mode="bottom" border-radius="14" :closeable="true"
			@close="onClose" :safe-area-inset-bottom="true" :mask-close-able="true">
			<view class="school-box">
				<view class="school-title">选择学校</view>
				<view class="search">
					<u-search v-model="searchKeyword" @change="onSearch" bg-color="#F4F4F4"></u-search>
				</view>
				<view class="school-list">
					<view class="school-item" :class="{'active':index==schoolIndex}" v-for="(item,index) in schoolList"
						:key="item.id" @click="schoolIndex=index"><text>{{item.name}}</text>
						<image src="../../static/images/icon_gou.png"></image>
					</view>
				</view>
				<button class="school-btn" @click="onClick()">
					确定选择
				</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getSchoolList
	} from "@/api/order";
	var initList = [];
	export default {
		props: {
			show: {
				type: Boolean,
			},
		},
		data() {
			return {
				showPop: false,
				schoolList: [],
				schoolIndex: null,
				searchKeyword: ''
			};
		},
		watch: {
			show(val) {
				this.showPop = val;
				this.getSchoolListFun();
			},
		},
		methods: {
			onClose() {
				this.$emit("close");
			},
			onClick() {
				this.showPop = false;
				this.$emit('confirm', this.schoolList[this.schoolIndex]);
			},
			onSearch() {
				this.schoolList = initList.filter((item) => {
					return item.name.indexOf(this.searchKeyword) > -1
				})
			},
			async getSchoolListFun() {
				let {
					data
				} = await getSchoolList()
				initList = data
				this.schoolList = data
			}
		}
	}
</script>

<style lang="scss">
	.school-box {
		padding: 35rpx;

		.school-title {
			padding: 20rpx;
			font-size: 32rpx;
			font-weight: 700;
		}

		.search {
			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
			position: relative;
			z-index: 1;
		}

		.school-list {
			height: 800rpx;
			overflow-y: auto;

			.school-item {
				display: flex;
				padding: 20rpx;
				border-radius: 10rpx;
				font-size: 25rpx;
				justify-content: space-between;
				align-items: center;

				image {
					display: none;
					width: 20rpx;
					height: 15rpx;
				}

				&.active {
					background-color: $-color-primary;
					color: #fff;

					image {
						display: inline-block;
					}
				}
			}
		}

		.school-btn {
			width: 448rpx;
			height: 75rpx;
			margin: 40rpx auto 20rpx auto;
			background-color: $-color-primary;
			border-radius: 16rpx;
			font-size: 30rpx;
			line-height: 75rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>